<template>
  <div class="mh-100p">
    <el-menu :default-active="billType" mode="horizontal" class="bdr-top-10">
      <el-menu-item @click="getBills('')" index="">全部</el-menu-item>
      <el-menu-item @click="getBills('0')" index="0">电票
        <v-plain-tips :num="billTips.electricTicketCount"/>
      </el-menu-item>
      <el-menu-item @click="getBills('1')" index="1">纸票
        <v-plain-tips :num="billTips.paperTicketCount"/>
      </el-menu-item>
    </el-menu>
    <div class="bg-fff pd-10 fx-1 bdr-bottom-10">
      <div class="edit-serch-right">
        <v-search-input @getBillNum="getBillNum"></v-search-input>
        <el-button type="primary" class="equity-btn" @click="$router.push('/bill-service/financing/single')">+&nbsp;发起融资</el-button>
      </div>
      <div class="top">
        <el-radio-group v-model="billStatus" @change="getBills()">
          <el-radio-button :label="item.value" v-for="item in $dict.billAuthTypes" :key="item.value">
            {{item.label}}
            <v-plain-tips :num="billTips.pendingReviewCount" v-if="item.value===0" class="tips"/>
            <v-plain-tips :num="billTips.pendingInquiryCount" v-if="item.value===1" class="tips"/>
          </el-radio-button>
        </el-radio-group>
        <em class="fx-1"></em>
        <!--<el-checkbox v-model="isCard" label="卡片模式" border></el-checkbox>-->
        <i class="viweExplain">视图：</i>
        <span class="qiehuan-box">
          <i class="iconfont icon-qiapianshi icon-qiehuan-card" :class="{'isCardActive':isCard}" @click="switchoverCard(true)"></i>
          <i class="iconfont icon-liebiaoshi icon-qiehuan-card" :class="{'isCardActive':!isCard}" @click="switchoverCard(false)"></i>
        </span>
      </div>
      <div class="panel">
        <v-bill-card-inventory-list v-if="isCard" :bills="bills" @change="changePages" @emitDeleteBill="emitDeleteBill"></v-bill-card-inventory-list>
        <v-plain-table v-else :data="bills" @change="changePages">
          <template slot="expand" slot-scope="{scope}">
            <el-button type="text" v-if="scope.row.billStatus === 1" @click="publishBill(scope.row)">询价</el-button>
            <el-button type="text" v-if="scope.row.billStatus === 3" @click="deleteBill(scope.row)">删除</el-button>
            <el-button type="text" v-if="scope.row.billStatus === 0 || scope.row.billStatus === 1" @click="$router.push(`./detail/${scope.row.id}`)">详情</el-button>
            <el-button type="text" v-if="scope.row.billStatus === 3"
                       @click="$router.push(`/bill-service/financing/single?id=${scope.row.id}`)">编辑
            </el-button>
          </template>
        </v-plain-table>
      </div>
      <v-edit-dialog ref="edit-dialog" @reload="reloadList"/>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vBillCardInventoryList from '@/components/bill-card-inventory-list'
  import vPlainTable from '@/components/plain-table'
  import vPlainDialog from '@/components/plain-dialog'
  import vBillDetail from '@/components/bill-detail'
  import vPlainTips from '@/components/plain-tips'
  import { Action, Getter } from 'vuex-class'
  import vSearchInput from '@/components/search-input'

  import vEditDialog from "../edit"

  @Component({
    components: {
      vBillCardInventoryList,
      vPlainTable,
      vBillDetail,
      vPlainDialog,
      vPlainTips,
      vEditDialog,
      vSearchInput
    }
  })
  export default class Inventory extends Vue {
    billStatus = ''
    billType = ''
    isCard = false
    bills: TableData = {
      header: [
        {
          key: 'billNumber',
          label: '票据号'
        },
        {
          key: 'faceValue',
          label: '票面金额'
        },
        {
          key: 'expiryDate',
          label: '到期日'
        },
        {
          key: 'billStatusName',
          label: '票据状态',
          width: '80'
        },
        {
          key: 'acceptor',
          label: '承兑人信息'
        },
        {
          key: 'biddingMethodName',
          label: '期望价格',
          width: '80'
        }
      ],
      body: [],
      footer: {
        total: 0,
        currentPage: 1
      }
    }
    currentBillDetail = {}
    @Action getBillsTips
    @Getter billTips
    @Action getMenusTips
    @Getter menuTips
    numBill = ''
    created () {
      if(this.$route.query.msgType !== null && this.$route.query.msgType !== undefined){
          this.billStatus = this.$route.query.msgType
      }
    }
    changePages (page) {
        this.bills.footer.currentPage = page
        this.getBills()
    }
    async getBillNum(val){
      this.numBill = val
      this.getBills()
    }

    async emitDeleteBill(valId) {
      // console.log('oooooo')
      // console.log(valId)
      let res: AjaxResponse = await this.$axios.delete(`g/gateway/bill/delete/${valId}`)
      this.$utils.tips(res)
      if (res.responseCode === 200) {
          this.getBills()
          this.getBillsTips()
          this.getMenusTips()
      }
    }

    async getBills (billType = '') {
      this.billType = billType
      let res: AjaxResponse = await this.$axios.post('g/gateway/bill/bills', {
        pageSize: 10,
        currentPage: this.bills.footer.currentPage,
        billStatus: this.billStatus,
        billType: this.billType,
        billNumber: this.numBill
      })
      if (res.responseCode === 200) {
        this.bills.body = res.data.items
        this.bills.footer.total = res.data.totalNum
      }
    }

    async publishBill (row) {
      if(row.biddingMethod === 0){
        this.$refs['edit-dialog'].openDialog(row)
      }else{
        let res: AjaxResponse = await this.$axios.post('g/gateway/bill/initiateinquiry', {
            billId: row.id
        })
        this.$utils.tips(res)
        if (res.responseCode === 200) {
            this.getBills()
            this.getBillsTips()
            this.getMenusTips()
        }
      }
    }

    async deleteBill (row) {
      let res: AjaxResponse = await this.$axios.delete(`g/gateway/bill/delete/${row.id}`)
      this.$utils.tips(res)
      if (res.responseCode === 200) {
          this.getBills()
          this.getBillsTips()
          this.getMenusTips()
      }
    }

    reloadList () {
      this.getBills()
      this.getBillsTips()
    }

    getBillDetail (id) {
      return this.$axios.get(`b/boms/bill/${id}`)
    }

    switchoverCard (cardBollen) {
        if(cardBollen) {
            this.isCard = true
        }else{
            this.isCard = false
        }
    }

    async showBillDetail ({ id }) {
      let res: AjaxResponse = await this.getBillDetail(id)
      if (res.responseCode === 200) {
        this.currentBillDetail = res.data
        this.$refs.detail.openDialog()
      }
    }

    mounted () {
      this.getBills()
      this.getBillsTips()
    }
  }
</script>

<style lang="less" scoped>
  .mh-100p {
    display: flex;
    flex-direction: column;
  }

  .bg-fff {
    margin-top: 10px;
  }

  .top {
    display: flex;
    padding-bottom: 20px;
  }

  .tips {
    position: absolute;
    right: 2px;
    top: 10px;
  }
  .edit-serch-right {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  .equity-btn {
    margin-left: 8px;
  }
  .icon-qiehuan-card {
    display: inline-block;
    font-size: 24px;
    cursor: pointer;
    height: 38px;
    color: #ddd;
    width: 43.5px;
    text-align: center;
    padding: 0;
  }
  .icon-qiapianshi {
    border-right: 1px solid #ddd;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .icon-liebiaoshi {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .qiehuan-box {
    width: 90px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    height: 40px;
    line-height: 40px;
    display: flex;
  }
  .isCardActive {
    background: #f2f6f9;
  }
  .viweExplain {
    color: #666;
    line-height: 40px;
  }
</style>
